<template>
	<div id="store-app">
		<div class="img-box">
			<img src='http://47.92.248.246:9010//Upload/2/Images/2019/04/22/e8dcf8af084a4903be36713c79d91e38.png' />
			<!-- <img v-bind:src="FileUrl+store.image" onerror="this.src=config.NoImg" /> -->
			<ul class="tab">
				<li data-id="store-info-goods" class="cur" @click="Tab"><span>商品</span></li>
				<li data-id="store-info-coupons" @click="Tab"><span>优惠券</span></li>
				<li data-id="store-info-content" @click="Tab"><span>介绍</span></li>
			</ul>
		</div>
		<div class="store-info">
			<div id="store-info-goods">
				<ul class="flex" v-if="goods.length>0">
					<li @click="$router.push('/GoodsDetail/'+g.id);" v-for="g in goods">
						<img v-bind:src="FileUrl+g.image" />
						<p><label>{{g.name}}</label><strong>￥{{g.price}}</strong></p>
					</li>
				</ul>
				<p class="no-info" v-else>暂无商品</p>
			</div>
			<div id="store-info-coupons">
				<ul v-if="coupons.length>0" class="flex">
				</ul>
				<p class="no-info" v-else>暂无优惠券</p>
			</div>
			<div id="store-info-content" v-html="store.introduce">
				{{store.introduce}}
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				FileUrl: config.FileUrl,
				store: {},
				goods: [],
				coupons: []
			}
		},
		components: {

		},
		beforeCreate: function() {
			var id = this.$route.params.id;
			this.$http.get(config.ApiUrl + '/shop/ChainDetail?chainId=' + id).then(
				response => {
					if (response.body.success) {
						this.store = response.body.data.chainModel;
						this.goods = response.body.data.productList;
						console.log(response.body);
						document.title = this.store.name;

					} else {
						this.$layer.toast({
							icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中
							content: response.body.data,
							time: 3000 // 自动消失时间 toast类型默认消失时间为2000毫秒
						});
					}

				}
			);
		},
		mounted: function() {
			//alert(1);
			document.title = this.store.name;
		},
		methods: {
			Tab: function(e) {
				var id = e.currentTarget.dataset.id;
				var curid = document.querySelector(".tab>.cur").getAttribute("data-id");
				document.getElementById(curid).style.display = 'none';
				//alert(id);
				document.querySelector(".tab>.cur").classList.remove("cur");
				e.currentTarget.classList.add("cur");
				document.getElementById(id).style.display = 'block';
			}
		}
	}
</script>

<style>
	#store-app {
		background: -webkit-linear-gradient(top, red, blue);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(top, red, blue);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(top, red, blue);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to top, red, blue);
		/* 标准的语法 */
	}

	#store-app .store-info {}

	#store-app .img-box {
		position: relative;
	}

	#store-app .img-box .tab {
		display: flex;
		position: absolute;
		background-color: rgba(255, 255, 255, 0);
		width: 90vw;
		margin-left: 5vw;
		height: 2rem;
		bottom: 5rem;

	}

	#store-app .img-box .tab li {
		text-align: center;
		flex: 1;
	}

	#store-app .img-box .tab li span {
		font-size: 1.6rem;
		font-weight: 400;
		color: white;
		padding: .5rem 0;
	}

	#store-app .img-box .tab .cur span {
		border-bottom: 2px solid white;
	}

	#store-app .store-info {
		background-color: white;
		width: 90vw;
		margin: auto;
		min-height: 60vh;
		border-top-right-radius: 1rem;
		border-top-left-radius: 1rem;
		position: relative;
		top: -4rem;
		padding-top: 4rem;
	}

	#store-info-goods .flex {
		flex-wrap: wrap;
	}

	#store-info-goods .flex li {
		width: 30vw;
		border: 2px solid #f1f1f1;
	}

	#store-info-goods .flex li img {
		width: 100%;
	}

	#store-info-goods .flex li strong {
		font-size: larger;
		color: #E82C3A;
	}

	#store-info-coupons {
		display: none;
	}

	#store-info-content {
		display: none;
	}

	.no-info {
		text-align: center;
		color: #999;
		font-size: 1.6rem;
	}

	.no-info:before {
		content: "一一一";
		margin-right: .5rem;
	}

	.no-info:after {
		content: "一一一";
		margin-left: .5rem;
	}
</style>
